<template>
  <view :class="formItem.config.class">
    <template v-if="formItem.config['model'] == 'appModel3'">
      <view class="package-btn-content flex-normal">
        <view class="left-btn flex-center"
          :style="{
            'font-family': setAttr('listDesc_btnPrice', 'fontFamily'),
            'font-size': pxToRpx(setAttr('listDesc_btnPrice', 'fontSize')),
            'color': setAttr('listDesc_btnPrice', 'color'),
          }">
					<text style="font-size: 28rpx;">特惠价</text>
					<text style="font-size: 60rpx;">{{totalWFPrice}}</text>
					<text style="font-size: 28rpx;">元</text>
					<!-- <text style="font-size: 28rpx;">
						即享{{totalWFPrice}}元{{list.length}}项服务
					</text> -->
        </view>
        <view class="right-btn flex-center"
          :style="{
						'font-size': '32rpx',
            'font-family': setAttr('listDesc_btnPackage', 'fontFamily'),
            'color': setAttr('listDesc_btnPackage', 'color')
          }">
						享原价{{totalPrice}}元服务
        </view>
      </view>
      <view class="package-main-content">
        <view class="col-item flex-column" v-for="(pack) in setList(list, 3)" :key="pack.id">
          <view class="col-label"
          :style="{
            'font-family': setAttr('listTitle_normal', 'fontFamily'),
            'font-size': pxToRpx(setAttr('listTitle_normal', 'fontSize')),
            'color': setAttr('listTitle_normal', 'color'),
          }">{{pack.serveName}}</view>
          <view class="col-money flex-center">
            <view class="money-icon"
              :style="{
              'font-family': setAttr('listIcon_normal', 'fontFamily'),
              'font-size': pxToRpx(setAttr('listIcon_normal', 'fontSize')),
              'color': setAttr('listIcon_normal', 'color'),
            }">￥</view>
            <view class="money-num" 
              :style="{
              'font-family': setAttr('listNum_normal', 'fontFamily'),
              'font-size': pxToRpx(setAttr('listNum_normal', 'fontSize')),
              'color': setAttr('listNum_normal', 'color'),
            }">{{pack.price}}</view>
            <view class="money-desc"
              :style="{
              'font-family': setAttr('listDesc_normal', 'fontFamily'),
              'font-size': pxToRpx(setAttr('listDesc_normal', 'fontSize')),
              'color': setAttr('listDesc_normal', 'color'),
            }">价值</view>
          </view>
        </view>
      </view>
      <view v-if="completeIncome" class="package-desc"
        :style="{
          'font-family': setAttr('desc_normal', 'fontFamily'),
          'font-size': pxToRpx(setAttr('desc_normal', 'fontSize')),
          'color': setAttr('desc_normal', 'color'),
        }">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</view>
    </template>
    <template v-if="formItem.config['model'] == 'appModel5'">
      <view class="model-5-content">
        <view class="title-content flex-center">
          <view class="title-txt"
            :style="{
							'font-family': setAttr('listTitle_normal', 'fontFamily'),
							'font-size': pxToRpx(setAttr('listTitle_normal', 'fontSize')),
							'color': setAttr('listTitle_normal', 'color'),
            }">{{ setAttr('listTitle_normal', 'text')}}</view>
        </view>
        <view  :class="['package-main-content', list.length <= 2 && 'center']"
          :style="{
						'font-family': setAttr('list_normal', 'fontFamily'),
						'font-size': pxToRpx(setAttr('list_normal', 'fontSize')),
						'color': setAttr('list_normal', 'color'),
          }">
          <view class="col-item flex-column" v-for="(pack) in  setList(list, 3)" :key="pack.id">
            <view class="col-label">{{pack.serveName}} * {{ pack.itemNum }}</view>
            <view class="moeny-line"></view>
            <view class="col-money flex-center">
              <view class="money-num">价值{{pack.price}}</view>
            </view>
          </view>
        </view>
        <view class="package-total-content">
          <view class="total-txt"
          :style="{
						'font-family': setAttr('listTotal_normal', 'fontFamily'),
						'font-size': pxToRpx(setAttr('listTotal_normal', 'fontSize')),
						'color': setAttr('listTotal_normal', 'color'),
          }"> 现在下单即享以下项目，总价值{{totalPrice}}元 </view>
          <view class="total-image-content flex-column">
            <view class="image-label">特惠价</view>
            <view class="image-val flex-normal">
              <view class="val-unit">￥</view>
              <view class="val-num">{{totalWFPrice}}</view>
            </view>
          </view>
        </view>
        <view v-if="completeIncome" class="package-desc"
          :style="{
            'font-family': setAttr('desc_normal', 'fontFamily'),
            'font-size': pxToRpx(setAttr('desc_normal', 'fontSize')),
            'color': setAttr('desc_normal', 'color'),
          }">分享得现金：分享活动，并被购买，将获得{{completeIncome}}元现金奖励</view>

      </view>
    </template>
  </view>
</template>

<script>
import {pxToRpx} from './tools.js'
import { mapGetters } from 'vuex'
import {getPackages, getGroupInfo} from '@/api/hd/index.js'

export default {
  name: 'DPackage',
  computed: {
    ...mapGetters(['vuex_activity']),
    completeIncome(){
      let {completeIncome, whetherToShare} = this.vuex_activity
      if(!whetherToShare) return false
      return completeIncome
    },
  },
	props: {
		formItem:{
			type: Object,
			default: {}
		}
	},
  data(){
    return {
			routeParams: {},
			groupList: [],
			sold: '0',
			addUp: '0',
			list: [],
      totalPrice: 0,
      totalWFPrice: 0
    }
  },
  mounted(){
    let _self = this
		_self.routeParams = uni.getStorageSync('icar-wxActive')
    _self.getTcList()
    _self.getGroupInfo()
  },
  methods: {
    pxToRpx: pxToRpx,		
		setList(list, num){
			let len = list.length
			return list
		},
    setAttr(configKey, valKey){
    	let _self = this
    	if(configKey == 'formItem'){
    		return _self.formItem['configH5'][valKey]
    	}else{
    		if(!_self.formItem[configKey]) return
    		return _self.formItem[configKey]['configH5'][valKey]
    	}
    },
		getGroupInfo(){
			let _self = this
			if(!_self.routeParams['a']) return
			getGroupInfo(_self.routeParams['a']).then(res => {
				let {addUp, groupBuying, sold, groupBuyingPrice} = res.data
				_self.sold = sold
				_self.addUp = addUp
				if(groupBuying){
					_self.groupList = groupBuying
				}else{
					_self.groupList = [{isTy: true, price: groupBuyingPrice}]
				}
			})
		},
		getTcList(){
			let _self = this
			if(!_self.routeParams['a']) return
			getPackages(_self.routeParams['a']).then(res => {
				let {serveList, writeOffPrice = '0.00'} = res.data || {}
				_self.list = serveList || []
				_self.totalWFPrice = parseFloat(writeOffPrice)
				_self.list.forEach(i => {
					_self.totalPrice += parseFloat(i.price)
				})
			})
		},
  },
}
</script>

<style scoped lang="scss">
	// px 转为 rpx 的函数
	@function rem($px) {
	  @return $px * 1rpx;
	}
  .app-model-3.package-model{
		position: relative;
		padding: rem(20) rem(30);
		margin: 0;
		.package-btn-content{
			.left-btn{
				width: rem(310);
				height: rem(98);
				background: url('/static/image/app-model-3/btn-1.png') no-repeat center;
				background-size: contain;
				border-radius: 0 0 rem(49) rem(49);
			}
			.right-btn{
				width: rem(310);
				height: rem(98);
				background: url('/static/image/app-model-3/btn-2.png') no-repeat center;
				background-size: contain;
				flex: 1;
			}
		}
		.package-main-content{
			padding: rem(44) 0 rem(30);
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: rem(20);
			.col-item{
				position: relative;
				height: rem(208);
				background: url('/static/image/app-model-3/package-normal-bg.png') no-repeat center;
				background-size: contain;
				.col-label{
					position: absolute;
					left: rem(20);
					right: rem(20);
					top: rem(25);
					text-align: center;
				}
				.col-money{
					position: absolute;
					left: rem(20);
					right: rem(20);
					top: rem(120);
					.money-icon{
						font-weight: 500;
					}
					.money-num{
						font-weight: 500;
					}
					.money-desc{
						font-weight: 500;
						writing-mode: tb-rl;
					}
				}
			}
		}
		.package-desc{
			font-size: rem(24);
			color: #FECD8B;
		}
	}
  .app-model-5.package-model{
		// margin: 0;
		// padding: 0 30rpx 30rpx;
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
    }
    .package-main-content{
      background: linear-gradient(to top, #D1EEFE, #FFFFFF);
      margin: rem(30);
      border-radius: rem(12);
      border: rem(1) solid #3288CE;
      font-weight: bold;
      display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: rem(20);
      padding: rem(15) 0;
      align-items: center;
      justify-items: center;
      &.center{
        grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
        .col-item:nth-child(n)::after{
          display: none;
        }
      }
      .col-item{
        text-align: center;
        padding: rem(20) rem(20);
        position: relative;
        .moeny-line{
          border-bottom: 1px dotted #3288CE;
          width: 100%;
          margin: rem(20) 0 rem(30) 0;
        }
        &:nth-child(3n)::after{
          display: none;
        }
        &::after{
          content: '';
          position: absolute;
          height: rem(160);
          border-right: 1px dotted #3288CE;
          top: 50%;
          transform: translateY(-50%);
          right: rem(-10.5);
        }
      }
    }
    .package-total-content{
      margin: rem(30) 0;
      padding: 0 rem(30);
      position: relative;
      .total-image-content{
        position: absolute;
        background: url('/static/image/app-model-5/th-bg.png') no-repeat center;
        background-size: contain;
        width: rem(160);
        height: rem(130);
        right: 0;
        top: rem(-80);
        text-align: center;
        color: #97651B;
        align-items: center;
        justify-content: center;
        .image-label{
          font-size: rem(24);
        }
        .val-unit{
          font-size: rem(24);
        }
        .val-num{
          font-size: rem(40);
          font-weight: bolder;
        }
      }
    }
    .package-desc{
      line-height: 2.4;
      padding: 0 rem(30);
    }
  }
</style>
